<template>
  <!--分享弹框组件-->
  <div class="share-modal">
    <a-modal v-model:open="localOpen" :title="props.title" :footer="false" @cancel="doCancel">
      <h4>复制分享链接</h4>
      <a-typography-link copyable>
        {{ props.link }}
      </a-typography-link>
      <div style="margin-bottom: 16px"></div>
      <h4>手机扫码查看</h4>
      <a-qrcode :value="props.link"></a-qrcode>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  title: string
  link: string
  open: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: () => '分享',
  link: () => 'https://laoyujianli.com/share/yupi',
})

const emit = defineEmits(['update:open'])

// 注意: props.open 是一个单向数据流，不能直接修改它，否则会报错。
// ❌ 警告！prop 是只读的！
// https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
// 使用本地状态来管理模态框的显示/隐藏
const localOpen = ref(props.open)

// 监听 props.open 的变化并同步到本地状态
watch(
  () => props.open,
  (newVal) => {
    localOpen.value = newVal
  },
  { immediate: true },
) // 立即执行一次以初始化 localOpen

// 当用户点击取消或者确认时，发送 update:open 事件给父组件
const handleOk = () => {
  emit('update:open', false)
}

const doCancel = () => {
  emit('update:open', false)
}

// 定义组件暴露的属性和方法,给付组件使用
// https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
// defineExpose({
//   openModal,
// })
</script>

<style scoped></style>
